<template>
	<view class="container">
	  <!-- 头部登录提示 -->
	  <!-- <view class="login-header">
	    <text class="login-text">立即登录</text>
	    <text class="sub-text">登录后享受多物业服务</text>
	  </view> -->
	
	  <!-- 开门码区域 -->
	  <view class="qrcode-section">
	    <text class="section-title">开门码</text>
	    <view class="qrcode-box"></view>
	  </view>
	
	  <!-- 常用服务网格 -->
	  <view class="service-grid">
      <view v-for="(item, index) in services" :key="index" class="service-item">
        <view class="icon-wrapper">
          <uni-icons :type="item.icon" size="30" color="#2a8bf2"></uni-icons>
        </view>
        <text class="service-title">{{ item.title }}</text>
        <text class="service-desc">{{ item.desc }}</text>
      </view>
    </view>

    <uni-popup>
      
    </uni-popup>
	
	 
	</view>
</template>

<script>
 
  import { open } from '@/api/device.js'
	export default {
    components: {
    	
    },
		data() {
			return {
        deviceid:"",
        gateInfo:{},
        value: '',
        confirmText:"提交",
        code :"",
        services: [
          { icon: 'shop', title: '生活缴费', desc: '在线缴纳物业费' },
          { icon: 'repairs', title: '报修报事', desc: '维修一触即发' },
          { icon: 'person', title: '联系管家', desc: '一键联系及时响应' },
          { icon: 'phone', title: '常用电话', desc: '随时查找服务电话' },
          { icon: 'gift', title: '物品借用', desc: '缺工具就来这借' },
          { icon: 'contact', title: '访客通行', desc: '访客邀约一触即发' },
          { icon: 'list', title: '问卷调查', desc: '收集群众金点子' }
        ]
			}
		},
    mounted(){
    	let that = this;
    	//获取code
    	uni.login({
    		success: (res) => {
    			console.log("code", res.code);
    			that.code = res.code;
    			//that.open();
    		},
    	});
    },
    onLoad(options){
      let qrCode = getApp().globalData.qrCode;
      if (qrCode){
        //支付宝扫描二维码进来的
        let zfbObj = this.getUrlParam(qrCode);
        this.deviceid=zfbObj["id"];
      }else if(options.id){
        this.deviceid=options.id;
      }
      
    },
    onShow() {
    },
		methods: {
      async open() {
        console.log("code",this.code);
        let res = await open({auth_code:this.code,id:this.deviceid});
        if(res.data.code==0){
          uni.showModal({
          	title: '提示',
          	content: res.data.data.msg,
            showCancel:false,
          });
        }else{
          uni.showModal({
          	title: '提示',
          	content: res.data.msg,
            showCancel:false,
          });
        }
      },
      number(e){
      	this.value = e
      },
      conform(e){
        trade({money:this.value,remark:"",gate_id:this.gateid}).then((res)=>{
        	if(res.data.code==0){
        		my.tradePay({
        			tradeNO: res.data.data.trade_no,
        			success:(res)=>{
        				
        			},
        			fail:(err)=>{
        				console.log("err",err);
        			}
        		})
        	}
        })
      	console.log('提交')
      },		
      getGateInfo(){
        getCommunityGate({gate_id:this.gateid}).then((res)=>{
          if(res.data.code=="0"){
            this.gateInfo=res.data.data
          }
        })
      },
      getUrlParam(url){
         let params = url.split("?")[1].split("&");
         let obj = {};
         params.map(v => (obj[v.split("=")[0]] = v.split("=")[1]));
         return obj
      },
  
			
		}
	}
</script>

<style scoped lang="less">
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.login-header {
  padding: 40rpx;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.login-text {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.sub-text {
  color: #888;
  font-size: 24rpx;
}

.qrcode-section {
  background: #fff;
  padding: 30rpx;
  margin: 20rpx 0;
  border-radius: 16rpx;
}

.qrcode-box {
  height: 300rpx;
  background: #eee;
  margin-top: 20rpx;
  border-radius: 8rpx;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;

  .service-item {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    text-align: center;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
    
    .icon-wrapper {
      margin-bottom: 20rpx;
    }

    .service-title {
      display: block;
      font-size: 28rpx;
      color: #333;
      margin-bottom: 10rpx;
    }

    .service-desc {
      display: block;
      font-size: 24rpx;
      color: #999;
    }
  }
}

.icon {
  width: 80rpx;
  height: 80rpx;
  display: block;
  margin: 0 auto 20rpx;
}

.sub {
  display: block;
  color: #666;
  font-size: 24rpx;
  margin-top: 10rpx;
}

.function-list {
  background: #fff;
  border-radius: 16rpx;
  padding: 0 30rpx;
}

.list-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
  display: flex;
  align-items: center;
}

.list-item:last-child {
  border-bottom: none;
}

</style>